<template>
		<div class="notice" @click.stop="click" >
				<svg-icon class-name="notice-icon" icon-class="notice"  />
				<el-badge class="mark" :max="100" :value="unReadNum" v-if="unReadNum > 0" />
		</div>
</template>

<script>
import {
	unRead
} from "@/api/system/message";
export default {
	name: "Notice",
	data(){
		return {
			unReadNum: 0,
			unReadPollingLocked: false,
			unReadInterval: null
		}
	},
	created() {
		 this.polling();
	},
	computed:{
		 timestamp(){
				return this.$store.state.user.message_timestamp;
			},
			user(){
				return this.$store.state.user;
			}
	},
	watch:{
		timestamp:{
			handler: function(val, oldVal) {
				 this.count();
			},
			immediate: true
		},
	},
	methods:{
			click(){
					this.$router.push('/system/message')
			},
			// 轮询消息
		 polling(){
				if (this.unReadInterval) {
					clearInterval(this.unReadInterval)
					this.unReadInterval = null
				}
				this.count();
				this.unReadInterval = setInterval(() => {
					this.count();
				}, 5000)

			},
		 count(){

				if(!this.isAuditPass){
					return ;
				}
				if (this.unReadPollingLocked) {
					return
				}
				this.unReadPollingLocked = true
				unRead().then(res => {
					this.unReadNum = res.messageUnRead + res.noticeUnRead;
					this.$store.commit('SET_MESSAGE_UNREAD', res ||{})
				}).catch(err=>{
					console.log(err)
				}).finally(() => {
					this.unReadPollingLocked = false
				});
			}
	}

}
</script>

<style scoped>
	.notice{
		cursor: pointer;
	}
</style>
